<template>
  <div id="bg" :class="{ hidden: !selfShow }">
    <div
      style="
        width: 750px;
        padding-bottom: 40px;
        margin: 1% auto;
        background: #ffffff;
        border-radius: 10px;
      "
      id="mg"
    >
      <div class="top">
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
        >
          <span
            class="s1 el-icon-close"
            style="margin-left: 30px; color: #4381e6"
          ></span>
          <span class="order-title">{{ $t("resourceOrder.orderInfo") }}</span>
          <span
            class="s1 el-icon-close"
            @click="onClose"
            style="margin-right: 30px"
          ></span>
        </div>
      </div>
      <div class="main">
        <!--基本信息-->
        <div class="container" v-if="infoData !== null">
          <span class="title">{{ $t("resourceOrder.info") }}</span>
          <div class="d1">
            <span>{{ $t("Info.nickName") }}</span>
            <div class="d2">
              <span>{{ infoData.nickName }}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{ $t("Info.account") }}</span>
            <div class="d2">
              <span>{{ infoData.email }}</span>
            </div>
          </div>
          <div class="d1">
            <span>{{ $t("Info.userMoney") }}</span>
            <div class="d2">
              <span>￥{{ infoData.userMoney }}</span>
            </div>
          </div>
        </div>
        <div v-if="myCommonData !== null">
          <!--费用-->
          <div class="container">
            <hr />
            <span class="title" style="margin-top: 20px">{{
              $t("resourceOrder.cost")
            }}</span>
            <div class="section" v-for="item in myCommonData" :key="item.id">
              <div class="d3">
                <span class="s2">{{ item.resourceName }}</span>
                <div class="d9">
                  <span
                    class="s4"
                    style="font-size: 14px; color: black"
                    v-if="item.purchaseType == 2"
                    >{{ item.purchaseDays }}</span
                  >
                  <span style="font-size: 14px">x {{ item.resourceNums }}</span>
                  <span class="s3" style="float: right"
                    >￥ {{ item.resourceTotalPrice }}</span
                  >
                </div>
              </div>
              <div class="d4">
                <span class="s4">{{ $t("resourceOrder.priceStructure") }}</span>
                <span class="s4" style="margin-left: 5px">{{
                  $t("shoppingCartOrder.basePrice")
                }}</span>
                <span class="s4" style="color: red; font-weight: bolder"
                  >￥ {{ item.resourcePrice }}</span
                >
                <span class="s4" style="margin-left: 5px">x 1</span>
              </div>
            </div>
            <!--分页-->
            <div
              style="
                width: 100%;
                display: flex;
                flex-direction: row;
                justify-content: center;
                margin-top: 25px;
                padding-bottom: 5px;
              "
            >
              <div class="block">
                <el-pagination
                  @current-change="getChangeResource(page6)"
                  :current-page.sync="page6"
                  layout="prev,pager,next"
                  :page-size="pageSize"
                  :total="commonsTotal"
                >
                </el-pagination>
              </div>
            </div>
          </div>

          <!--总价-->
          <div class="container">
            <hr />
            <div class="d5">
              <span style="margin-left: 300px" class="s6"
                >{{ $t("resourceOrder.totalOrders") }}:</span
              >
              <span class="s7" style="margin-right: 20px"
                >￥ {{ totalPrice }}</span
              >
            </div>
            <div class="d6">
              <span style="margin-left: 300px; margin-top: 5px" class="s6"
                >{{ $t("resourceOrder.totalPay") }}:</span
              >
              <span class="s8">￥ {{ totalPrice }}</span>
            </div>
            <button class="btn4" @click="send">
              {{ $t("resourceOrder.sendOrder") }}
            </button>
          </div>
        </div>
      </div>
    </div>
    <div id="tips" class="tips" :hidden="tips">
      <img :src="resultIcon" @dragstart="imgdragstart" />
      <span>{{ msg }}</span>
    </div>
    <Confirm
      :payAmount="totalPrice"
      :orderNo="orderNo"
      v-on:listenClose="onClose"
    ></Confirm>
  </div>
</template>

<script>
import Confirm from "../../components/custom/Confirm";
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import encryption from "../../common/encryption";

let userId;
let culture;
let pressId;
let selected;
let shoppingId;

export default {
  name: "CustomSlot",
  components: { Confirm },
  props: ["myCommonData", "totalPrice"],
  // { parentMethod: Function,}
  data() {
    return {
      selfShow: false,
      resultIcon: "../assets/images/icon_error.png",
      msg: "",
      tips: true,
      resourceList: null,
      infoData: null,
      page6: 1,
      pageSize: 5,
      commonsTotal: 0,
      account: "",
      address: "",
      contactWay: "",
      contacts: "",
      payAmount: 0,
      orderNo: "",
      pressName: "",
      day: "",
      value: 1,
    };
  },
  beforeCreate() {
    document.querySelector("body").setAttribute("style", "overflow-x:hidden");
  },
  beforeDestroy() {
    document.querySelector("body").removeAttribute("style");
  },

  created() {
    userId = this.$route.query.userId;
    shoppingId = this.$route.query.shoppingId;
  },

  mounted() {
    /**
     * 初始化打开订单弹窗，获取账户余额
     */
    let that = this;
    bus.$on("showCustomSlot", function (i) {
      that.value = i;
      that.selfShow = true;
      ajax.get({
        url:
          api.Info.routeName +
          api.Info.children.account +
          `${(userId = userId)}`,
        success: function (res) {
          this.resp = JSON.parse(encryption.decryptionMxr(res));
          that.infoData = this.resp;
          that.account = this.resp.email;
          that.address = this.resp.nickName;
          that.contactWay = this.resp.userMoney;
          (that.contacts = this.resp.contacts),
            (that.pressName = this.resp.pressName);
        },
        error(e) {},
      });

      //初始化获取资源数据
      // loadCommonDetail(1, that);
    });
  },
  methods: {
    imgdragstart(e) {
      e.preventDefault();
    },

    /**
     * 关闭订单弹窗
     */
    onClose() {
      this.selfShow = false;
    },

    /**
     * 提交资源订单
     */
    send() {
      let that = this;
      ajax.post({
        url: api.resource.privateRouteName + api.resource.children.submitOrder,
        data: {
          shoppingIds: this.myCommonData.map((item) => item.id),
          userId: userId,
        },
        success: function (res) {
          that.orderNo = JSON.parse(encryption.decryptionMxr(res)).orderNo;
          that.$message({
            message: that.$t("resource.sendSuccess"),
            type: "success",
          });
          that.$store.dispatch("cartShop/saveData", userId);
          bus.$emit("showDetail");
          // that.parentMethod(1);
        },
        File: function (res) {},
      });
    },
    getChangeResource(val) {
      // loadCommonDetail(val, this);
    },
  },
};

/**
 * 分页获取资源
 */
// function loadCommonDetail(page6, that) {
//   ajax.get({
//     url: api.resource.privateRouteName + api.resource.children.shoppingList,
//     data: {
//       userId: userId,
//       customizeType: that.value,
//       page: page6,
//       pageSize: 5,
//       m: Math.random(),
//     },
//     success(res) {
//       that.myCommonData = JSON.parse(encryption.decryptionMxr(res));
//       that.totalPrice = JSON.parse(encryption.decryptionMxr(res)).totalPrice;
//     },
//     error(e) {
//     },
//   });
// }
</script>

<style scoped>
.order-title {
  font-size: 30px;
  color: white;
  letter-spacing: 3px;
  text-align: center;
}

.s1 {
  font-size: 26px;
  color: white;
  margin-top: 5px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bg {
  /*position:fixed;*/
  /*top: 0;*/
  /*z-index: 999;*/
  /*border-radius: 10px;*/
  /*left: 0;*/
  /*border: 1px solid #979797;*/
  /*background: #EFF3F5;*/
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

.top {
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}

::-webkit-scrollbar {
  width: 2px;
}

.title {
  font-size: 20px;
  font-weight: bolder;
  display: block;
}

.container {
  width: 600px;
  margin: 25px auto;
}

.d1 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 15px;
  font-size: 14px;
  margin-left: 10px;
}

.d2 {
  width: 330px;
  text-align: center;
}

.tips {
  background: #ffffff;
  border: 1px solid #cccccc;
  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
  border-radius: 5px;
  position: fixed;
  top: 0;
  left: 40%;
  width: auto;
  height: 65px;
  z-index: 99;
}

.tips img {
  width: 30px;
  height: 30px;
  position: relative;
  margin-top: 18px;
  margin-left: 66px;
}

.tips span {
  font-size: 15px;
  color: #3c3c3c;
  letter-spacing: -0.05px;
  line-height: 16px;
  display: inline-block;
  position: relative;
  top: -8px;
  margin-left: 13px;
  padding-right: 66px;
}

.d3 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin-top: 20px;
}

.s2 {
  font-size: 16px;
  font-weight: bolder;
}

.d4 {
  margin-top: 10px;
}

.s3 {
  font-size: 14px;
  color: red;
}

.s4 {
  font-size: 14px;
  color: grey;
}

.d5 {
  float: right;
  width: 500px;
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.d6 {
  /*float:right;*/
  width: 500px;
  margin-top: 15px;
  margin-left: 100px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.s6 {
  font-size: 14px;
  font-weight: bolder;
}

.s7 {
  font-size: 14px;
}

.s8 {
  font-size: 20px;
  font-weight: bolder;
  color: red;
}

.btn4 {
  width: 120px;
  height: 35px;
  background: #4a90e2;
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 14px;
  float: right;
  margin-top: 20px;
}

.btn4:hover {
  cursor: pointer;
}

.d9 {
  width: 220px;
}
</style>
